
function a_1_1_1_1_1_load_html() {
  let _this=this;
  _this.__test_flag=false;
  _this.type="v-show";//加载格式 
  _this._log=function(...lst){if(_this.__test_flag){console.log(...lst)}};
  _this.index=0;
  _this.now_load_ids={};
  _this.run_flag=0;
  _this.run_lst=[];
  _this.set_now_load_ids=function(idx){
      if(_this.now_load_ids[idx]){return true}
      else{_this.now_load_ids[idx]=true;return false}
  }
  _this.dom_innerhtml={};
  _this.dom_js={};
  //加载指定src的js
  _this.loadScript=function(src) {
          return new Promise((resolve, reject) => {
              let script = document.createElement('script');
              script.src = src;
  
              script.onload = () => resolve();
              script.onerror = () => reject(new Error('Script failed to load'));
              document.head.appendChild(script);
          });
      }
  
  //计时器
  _this.timer=null;
  //待处理数据列表
  _this.timer_lst=[];
  //计时器运行函数
  _this.timer_func= async function(){
      while(_this.timer_lst.length){
          let new_obj=_this.timer_lst.shift();
          let func=new_obj.func;
          if(func.constructor.name === 'AsyncFunction'){
              await func(new_obj.params);
          } else{
              func(new_obj.params);
          }
      }
      _this.timer=null;
  };
  //给计数器运行的函数添加待处理数据  如果计时器没有开启则开启计时器
  _this.timer_start=function(obj) {  
      _this.timer_lst.push(obj);
      if(_this.timer==null){
  
          _this.timer = setTimeout(_this.timer_func, 0);    // 设置计时器为开启状态  
      }
  }  
  //加载指定html内容到dom下
  _this.load=async function(idx,url,dom) {
      _this.timer_start({
          func:_this.load_func,
          params:{url,dom,idx}
      });
  }
  //删除style和script标签
  _this.removeScriptsAndStyles=function(htmlString) {
    // 使用正则表达式匹配<script>标签及其内容
    let scriptRegex = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
    // 使用正则表达式匹配<style>标签及其内容
    let styleRegex = /<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi;
 
    // 替换<script>标签及其内容为空字符串
    let noScriptsHtml = htmlString.replace(scriptRegex, '');
    // 替换<style>标签及其内容为空字符串
    let cleanHtml = noScriptsHtml.replace(styleRegex, '');
 
    return cleanHtml;
}
function toggleDirectChildrenDisplay(parentElement, attributeName, targetValue) {
  // 获取所有直接子元素节点（不包括文本节点、注释节点等）
  let children = parentElement.children;
  
  // 遍历所有直接子元素节点
  for (let i = 0; i < children.length; i++) {
    let child = children[i];
    let now_val=child.getAttribute(attributeName);
    console.log("child.getAttribute(attributeName)",now_val,targetValue,now_val==targetValue,(child.getAttribute(attributeName) == targetValue) ? 'block' : 'none')
    child.style.display = (child.getAttribute(attributeName) == targetValue) ? 'block' : 'none';//如果属性值不是数字，或者不存在该属性，则不改变display属性
    // 你可以根据需要添加额外的逻辑来处理这些情况
  }
}
  _this.load_func=async function(obj){
      let url=obj.url;
      if(url==''){
        
        _this._log('0:url为空 不执行加载操作');
        return}
      let dom=obj.dom;
      let idx=obj.idx;
      if(_this.type=='v-if'){
        //删除下所有
        dom.innerHTML='';
      }
      if(_this.set_now_load_ids(url)){//已经加载过了
        if(_this.type=='v-show'){
          toggleDirectChildrenDisplay(dom,`a_1_1_1_1_1_val`,idx);
        }else if(_this.type=='v-if'){
          let new_dom=document.createElement("div");
          new_dom.className='a_1_1_1_1_1_container';
          new_dom.setAttribute(`a_1_1_1_1_1_val`,idx);
          new_dom.innerHTML=_this.dom_innerhtml[idx];
          dom.appendChild(new_dom)
          _this._log("_this.dom_js[idx]",_this.dom_js[idx]);
          for (let script of _this.dom_js[idx]) {
            eval(script);
          }
        }
        return
      }//如果加载过 则直接跳过
      // Step 1: Fetch the HTML content using AJAX
      fetch(url)
          .then(response => response.text())
          .then(async (htmla) => {
              // Step 2: Parse the HTML and extract script srcs and link/style hrefs
              let parser = new DOMParser();
              let doc = parser.parseFromString(htmla, 'text/html');
    
              let src_a = [];
              let href_a = [];
    
              //获取当前html页面的 所有script标签的src内容
              _this._log('1:获取当前html页面的 所有script标签的src内容');
              document.querySelectorAll('script[src]').forEach(script => {
                  let src = script.getAttribute('src');
                  if (!src_a.includes(src)) {
                      src_a.push(src);
                  }
              });
              _this._log('\t要加载的src:',src_a);
              //获取当前html和页面的 所有link标签的href内容
              _this._log('2:获取当前html和页面的 所有link标签的href内容');
              document.querySelectorAll('link[href]').forEach(element => {
                  let href = element.getAttribute('href');
                  if (href && !href_a.includes(href)) {
                      href_a.push(href);
                  }
              });
              _this._log('\t要加载的href:',href_a);
              //获取当前html页面的 所有style标签的id内容
              _this._log('3:获取当前html页面的 所有style标签的id内容');
              let styleElements = document.getElementsByTagName('style');
              for (let i = 0; i < styleElements.length; i++) {
                  let styleId = styleElements[i].id;
                  if (styleId) { // 检查id是否存在（即不是null或undefined，且不是空字符串）
                      href_a.push(styleId);
                  }
                }
              //获取当前html页面的 所有script标签的id内容
              _this._log('4:获取当前html页面的 所有script标签的id内容');
              let scriptElements = document.getElementsByTagName('script');
              for (let i = 0; i < scriptElements.length; i++) {
                  let scriptId = scriptElements[i].id;
                  if (scriptId) { // 检查id是否存在（即不是null或undefined，且不是空字符串）
                      src_a.push(scriptId);
                  }
                }
                _this._log('5:获取要加载页面的 所有link标签的href内容 并且加载未加载内容');
              doc.querySelectorAll('link[href]').forEach(link => {
                  let href = link.getAttribute('href');
                  if (!href_a.includes(href)) {
                      let newLink = document.createElement('link');
                      newLink.rel = 'stylesheet';
                      newLink.href = href;
                      document.head.appendChild(newLink);
                  }
              });
    
              _this._log('6:获取要加载页面的 所有style标签 并且加载未加载内容');
              let styleCounter = 0;
              doc.querySelectorAll('style').forEach(style => {
                  let href = style.getAttribute('href');
                  if (!href && !href_a.some(existingHref => existingHref.endsWith(`_${styleCounter}`))) {
                      let newStyle = document.createElement('style');
                      newStyle.textContent = style.textContent;
                      newStyle.setAttribute('id', `${idx}_${styleCounter++}`);
                      document.head.appendChild(newStyle);
                  }
              });
              _this._log('7:获取要加载页面的 所有script标签的src内容 并且加载未加载内容');
              let scripts = doc.querySelectorAll('script[src]');
              for (let script of scripts) {
                  let src = script.getAttribute('src');
                  if (!src || !src_a.includes(src)) {
                      _this._log('\ysrc:',src);
                      await _this.loadScript(src); // 确保loadScript返回一个Promise
                      // console.log("加载",script,"完成")
                  }
              }
              // doc.querySelectorAll('script[src]').forEach(async(script) => {
              //     let src = script.getAttribute('src');
              //     if (!src || !src_a.includes(src)) {
              //         await _this.loadScript(src);
              //         console.log
              //     }
              // });
              if(_this.type=='v-show'){
                toggleDirectChildrenDisplay(dom,`a_1_1_1_1_1_val`,idx);
              }
              _this._log('8:获取要加载页面的 添加body到指定dom的innerhtml');
              _this.dom_innerhtml[idx]=_this.removeScriptsAndStyles(doc.body.innerHTML);
              let new_dom=document.createElement("div");
              new_dom.className='a_1_1_1_1_1_container';
              new_dom.setAttribute(`a_1_1_1_1_1_val`,idx);
              new_dom.innerHTML=_this.dom_innerhtml[idx];
              dom.appendChild(new_dom)
              _this._log('9:获取要加载页面的 所有script标签 并且加载未加载内容');
              let run_script=[];
              let scriptx = doc.querySelectorAll('script:not([type])');
              for (let script of scriptx) {
                  run_script.push(script.textContent);
                  eval(script.textContent);
              }
              _this.dom_js[idx]=run_script;
              _this._log("10:end");
          })
          .catch(error => {
              console.error('Error fetching or processing the HTML:', error);
          });
    }
  }
  // o=new  a_1_1_1_1_1_load_html();
  // o.load(idx,'https://www.baidu.com/',document.getElementById("test")).then(result => {}).catch(error => {});;
    
Vue.component2('a_1_1_1_1_1', {
  template: `
      <div ref="father"style="width:100%;height:100%" 
      
  :class="['a_1_1_1_1_1',
  
'ea_m-'+data.__style.__margin,
'ea_mx-'+data.__style.__margin_x,
'ea_my-'+data.__style.__margin_y,
'ea_mr-'+data.__style.__margin_right,
'ea_ml-'+data.__style.__margin_left,
'ea_mt-'+data.__style.__margin_top,
'ea_mb-'+data.__style.__margin_bottom,
'ea_p-'+data.__style.__padding,
'ea_px-'+data.__style.__padding_x,
'ea_py-'+data.__style.__padding_y,
'ea_pr-'+data.__style.__padding_right,
'ea_pl-'+data.__style.__padding_left,
'ea_pt-'+data.__style.__padding_top,
'ea_pb-'+data.__style.__padding_bottom,


  { 'a_1_1_1_1_1_move_edit_class': data.edit_move_show }, { 'a_1_1_1_1_1_move_edit_class2': data.edit_move_show&&(!drawer) },]"
      >
<v-app-bar app>
<div class="a_1_1_1_1_1_head_class"><div class="a_1_1_1_1_1_left">
    <span @click="drawer = !drawer" :class="data.icon"></span>{{data.name1}}
  </div>
  <div ref='head' 
  :class="['a_1_1_1_1_1_head', { 'a_1_1_1_1_1_edit_class1': data.__style.__edit_flag__ }]"
  >
  <slot name="head"></slot>
</div>
</div>
</v-app-bar>


<div class="drawer" :class="{ open: drawer }">
<div class="drawer-content">
<v-list-item subtitle="Vuetify">{{data.name1}}</v-list-item>
<v-divider></v-divider>
    <v-list-item
      v-for="(item, key) in data.menu_data"
      :key="key"
      link
      :title="item.name"
       @click="select_url(key)"
    >
      <!-- 你可以在这里添加更多内容，比如图标和链接 -->
      <v-icon>{{ item.icon }}</v-icon> <!-- 假设你有一个 v-icon 组件来显示图标 -->
      <span>{{ item.name }}</span>
    </v-list-item>
</div>
</div>


<!-- 应用的主要内容区域 -->
<div class="v-main__wrap" style="
    padding-top: 56px;
    background: rgb(241, 240, 238);
    height: 100%;
"ref="main">


</div>
      </div>
`,  
data() {
    return {
      drawer: false,
      data:{
          __test_flag:true,
            edit_move_show:false,
            type:"v-if",
            name1: "后台管理系统",
            icon: "icon iconfont icon-shezhi",
            menu_data: [
                {name:'设备控制',icon:'',url:'',test:[{icon:''}]},
                {name:'用户中心',icon:'',url:'',test:[{icon:''}]},
                {name:'日志中心',icon:'',url:'',test:[{icon:''}]},
            ]
      }
    };
},
watch:{
  "data.__test_flag":function(e){
    let _this=this;
    _this.load_obj.__test_flag=e;
  },
  "data.type":function(e){
    let _this=this;
    _this.load_obj.type=e;
  }
},
methods:{
  select_url:function(idx){
    let _this=this;
    _this._log("当前选择的:\n\t索引(idx):",idx,"\n\t路由(url):",_this.data.menu_data[idx].url);
    _this.load_obj.load(idx,this.data.menu_data[idx].url,_this.$refs.main).then(result => {}).catch(error => {});
    _this.drawer=false;
  },
  selectItem(component) {
      this.currentComponent = component;
    },
    // move_show:function(){
    //     this.data.edit_move_show
    // },
      //删除之前显示的插槽
      con_del:function(){
        try{
            this.old_con_dom.parentNode.removeChild(this.old_con_dom);}catch{}
      },
      //显示当前的插槽
      con_add:function(obj){
        let dom=obj.dom;
        let ref=obj.ref;
        // console.log("初始化容器","新建一个dom");
        let new_dom=document.createElement('div');
        
        new_dom.setAttribute('miaobian','1');
        new_dom.innerHTML="<div style='height:100%;width:10px;background:red;z-index: 9999;'></div>"
      if (dom !== null) {
        // console.log("在...之前插入",new_dom,dom)
        this.$refs[ref].insertBefore(new_dom, dom);
      } else {
        // 如果 child_dom 是 null，则将新元素添加到 father_dom 的末尾
        this.$refs[ref].appendChild(new_dom);
      }
      this.con_del();
      this.old_con_dom=new_dom;
      },
      //查找 要插入的组件 位于哪一个插槽
      check_slot(dom){
        while(1){
            if(dom==this.$refs.father){return null}
            else if(dom==this.$refs.head){
                console.log("return head")
                return 'head'}
            else{dom=dom.parentNode}
        }
      }
},
mounted:function(){
  //用于加载url的
_this.load_obj=new  a_1_1_1_1_1_load_html();
_this.load_obj.__test_flag=_this.data.__test_flag;
_this.load_obj.type=_this.data.type;//加载格式 
//_this.load_obj.load(idx,'https://www.baidu.com/',document.getElementById("test")).then(result => {}).catch(error => {});;
}
}
);
// 
